<template>
    <div class="training">
        <div class="exmine">
            <h3><span></span>正在进行中的培训班</h3>
        </div>
        <div class="curse_box">
            <ul class="curse_list1">
                <li v-for="(item, index) in curseList" :key="index" class="curse_item">
                    <img :src="item.src" />
                    <div class="item_right">
                        <h4>{{item.title}}</h4>
                        <p class="time1"><span>应修学时:{{item.studyTime1}}学时</span><span>已修学时{{item.studyTime2}}学时</span></p>
                        <div class="score">
                            <span>考试成绩:{{item.score}}分</span>
                            <router-link to="accessTrain" class="baoBtn">进入培训</router-link>
                        </div>
                        <div class="btnBox">
                            <!-- <router-link to="./" class="detailBtn">培训评估</router-link> -->
                            <router-link to="trainDetail" class="detailBtn">查看详情</router-link>
                            <router-link to="examRecord" class="detailBtn">查看记录</router-link>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <footer class="footer">
            <ul class="footerList">
                <li @click="changeTab(index,item.footername)" :class="ind == index?'actived':''" v-for="(item,index) in footerList" :key="index">
                    <div class="icoimg"><img :src='ind == index?item.activednameimg:item.nameimg'></div>
                    <div class="iconame">{{item.footername}}</div>
                </li>
            </ul>
        </footer>

        <div v-transfer-dom>
            <x-dialog v-model="showHideOnBlur" class="dialog-demo" hide-on-blur>
                <h3>选择监管领域</h3>
                <div class="selectItem" @click="showMore">
                    <div class="selectValue selected"><input type="text" readonly value="应急管理机关"><span :class="{'showMore':toggle}"></span></div>
                    <ul v-if="toggle">
                        <li v-for="item in selectList1" :key="item">{{item}}</li>
                    </ul>
                </div>
                <div class="selectItem">
                    <div class="selectValue"><input type="text" readonly placeholder="请选择监管领域"><span></span></div>
                    <ul>
                        <li v-for="item in selectList2" :key="item">{{item}}</li>
                    </ul>
                </div>
                <div>
                <span @click="showHideOnBlur=false" class="vux-close">确 定</span>
                </div>
            </x-dialog>
        </div>
    </div>
</template>

<script>
import { XDialog } from 'vux'
export default {
    name: 'training',
    components: {
        XDialog 
    },
    data () {
        return {
            showHideOnBlur: true,
            toggle: false,
            curseList: [
                {src: require('../../assets/images/corse_img1.png'),title:'安全生产相关定义',studyTime1:'12',studyTime2:'6',score:'50'},
                {src: require('../../assets/images/corse_img2.png'),title:'消防基础知识',studyTime1:'12',studyTime2:'0',score:'0'},
                {src: require('../../assets/images/corse_img3.png'),title:'应急管理普法宣传',studyTime1:'12',studyTime2:'12',score:'100'},
                {src: require('../../assets/images/corse_img3.png'),title:'应急管理普法宣传',studyTime1:'12',studyTime2:'12',score:'100'},
                {src: require('../../assets/images/corse_img3.png'),title:'应急管理普法宣传',studyTime1:'12',studyTime2:'12',score:'100'},
                {src: require('../../assets/images/corse_img3.png'),title:'应急管理普法宣传',studyTime1:'12',studyTime2:'12',score:'100'},
                {src: require('../../assets/images/corse_img3.png'),title:'应急管理普法宣传',studyTime1:'12',studyTime2:'12',score:'100'},
                {src: require('../../assets/images/corse_img3.png'),title:'应急管理普法宣传',studyTime1:'12',studyTime2:'12',score:'100'},
            ],
            selectList1:['1','2'],
            selectList2:[],
            footerList:[
                {footername:'首页',nameimg:require('../../assets/images/home.png'),activednameimg:require('../../assets/images/home2.png')},
                {footername:'我的培训班',nameimg:require('../../assets/images/mytrain.png'),activednameimg:require('../../assets/images/mytrain2.png')}

            ],
            activeIndex:0,
            ind:1,
        }
    },
    mounted() {
        
    },
    created () {
        this.activeIndex = 0
    },
    methods: {
        showMore:function(){
		    this.toggle = !this.toggle
        },
        changeTab(index,name){
            this.ind = index
            if(index == 0){
                this.$router.push({
                    path:'/index'
                })
            }
        } 
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.training{
    height: 100%;
    position: relative;
}
.footer{
    position: fixed;
    bottom: 0;
    left: 0;
    height: 50px;
    border-top: 5px solid #efeff4;
    width: 100%;
    background: #fff;
}
.footerList{
    width:80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height:50px;
}
.footerList li{
    width:50%;
}
.footerList li.actived .iconame{
    color:#206aff;
}
.icoimg img{
    /* display: block; */
    width:20px;
    height:20px;
}
.icoimg,.iconame{
    font-size:10px;
    color:#999;
}
.exmine{
    background: #fff;
    padding: 0 15px;
}
.exmine h3{
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
    height: 50px;
}
.exmine h3 span{
    height: 16px;
    width: 4px;
    border-radius: 2px;
    display: block;
    background: #2269ff;
    margin-right: 5px;
}
ul,ul li{
    list-style: none;
    font-size: 14px;
}
.curse_box{
    padding: 0 15px;
    background: #fff;
}
.curse_list1{
    padding-top: 5px;
}
.curse_list1 li:last-child{
    margin-bottom: 0;
}
.curse_item{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    height: 95px;
    align-items: center;
}
.curse_item img{
    width: 135px;
    height: 90px;
}
.item_right{
    margin-left: 10px;
    width: calc(100% - 145px);
}
.item_right h4{
    font-size: 15px;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    margin-top: -2px;
}
.item_right p{
    color: #999;
    font-size: 12px;
    text-align: left;
    display: flex;
    justify-content: space-between;
}
.score{
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 3px 0 5px;
    font-size: 12px;
}
.btnBox{
    text-align: left;
    height: 25px;
    display: flex;
    justify-content: space-between;
}
.btnBox a,.score a{
    display: block;
    width: 65px;
    height: 25px;
    text-decoration: none;
    text-align: center;
    line-height: 25px;
    font-size: 12px;
    border-radius: 5px;
    box-sizing: border-box;
}
.baoBtn{
    background: #2269ff;
    color: #fff;
}
.detailBtn{
    border: 1px solid #2269ff;
    color: #2269ff;
}
</style>
<style lang='less'>
.training{
    .weui-dialog{
        width: 260px;
        height: 180px;
        background: #fff;
        border-radius: 10px;
        padding: 13px 15px 15px;
        text-align: left;
        h3{
            font-size: 15px;
            font-weight: bold;
            color: #2269ff;
            margin-bottom: 8px;
        }
        .selectItem{
            position: relative;
            margin-bottom: 20px;
            .selectValue{
                width: 100%;
                height: 40px;
                border-radius: 5px;
                background: #ececec;
                position: relative;
                &.selected{
                    background: #e7f3ff;
                }
                input{
                    outline: none;
                    border: none;
                    background: transparent;
                    width: 100%;
                    height: 100%;
                    box-sizing: border-box;
                    padding: 0 40px 0 15px;
                    font-size: 14px;
                }
                span{
                    display: block;
                    height: 40px;
                    width: 40px;
                    position: absolute;
                    right: 0;
                    top: 0;
                    background: url('../../assets/images/show_more.png') center center no-repeat;
                    background-size: 12px 7px;
                    transform: rotate(0deg);
                    transition: .3s;
                }
                span.showMore{
                    transform: rotate(180deg);
                    transition: .3s;
                }
            }
            ul{
                position: absolute;
                left: 0;
                top: 40px;
                background: #fff;
                width: 100%;
                z-index: 10;
                box-shadow: 0 1px 10px rgba(0,0,0,.1);
                li{
                    padding: 0 15px;
                    line-height: 36px;
                    font-size: 14px;
                }
            }
        }
        .vux-close{
            width: 100px;
            height: 40px;
            border-radius: 10px;
            color: #fff;
            background: #2269ff;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            font-weight: bold;
            font-size: 15px;
        }
    }
}
</style>